<script setup lang="ts">
import { ref, onBeforeMount } from "vue";
import { useRoute } from "vue-router";
import { getAllInquiryProdectsInfo } from "@/api/inquiryApi";
const route = useRoute();
const prodects = ref();
onBeforeMount(() => {
  getInquiryProdectsInfo(route.query.id);
});
//查询询价单产品
async function getInquiryProdectsInfo(id) {
  let res = await getAllInquiryProdectsInfo(id);
  if (res.code === 200) {
    data.value = res.data;
    prodects.value = res.data.customerInquiryDetails;
  }
}
const data = ref({
  saleId: "",
  type: "1",
  saleName: ""
});
//
const options = ref([
  {
    value: "1",
    label: "匡其斌"
  },
  {
    value: "2",
    label: "李四"
  },
  {
    value: "3",
    label: "王五"
  },
  {
    value: "4",
    label: "赵六"
  }
]);
const radio = ref(2);
//咨询单信息
const consultationInfo = ref({
  relationId: "",
  contactInfo: "",
  state: "",
  companyName: "",
  city: "",
  email: "",
  position: "",
  productDesc: ""
});
//询价单信息
const InquiryInfo = ref({
  id: "",
  sn: "",
  customerId: "",
  type: "",
  status: "",
  modifyDesc: "",
  enginnerId: "",
  freight: "",
  totalPrice: "",
  createOrderDesc: "",
  createOrderAudit: "",
  createOrderRefuseCause: ""
});
</script>

<template>
  <div>
    <!-- 咨询信息 -->
    <el-card style="margin-top: 30px">
      <template #header>
        <div class="card-header">
          <span v-if="data.type == '2'">咨询信息</span>
          <span v-else>询价信息</span>
        </div>
      </template>
      <div style="margin-left: 20px">
        <span>联系工程师:</span>
        <el-select
          v-model="data.saleName"
          placeholder="默认填写该客户的销售名字"
          size="large"
          style="width: 350px; margin-left: 8px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <br />
        <span>询价类型: </span>
        <el-radio-group
          v-model="data.type"
          style="width: 240px; margin-left: 10px"
        >
          <el-radio :label="1">询价单</el-radio>
          <el-radio :label="2">咨询单</el-radio>
        </el-radio-group>
      </div>
    </el-card>
    <div v-if="data.type == '1'">
      <!-- 产品信息 -->
      <el-card style="margin-top: 30px">
        <template #header>
          <div class="card-header">
            <span>产品信息</span>
          </div>
        </template>
        <div>
          <el-table :data="prodects" border style="width: 100%">
            <el-table-column prop="picurl" label="产品图片" width="180">
              <template v-slot="{ row }">
                <el-image
                  style="width: 50px; height: 50px"
                  :src="row.picurl"
                  :fit="'fill'"
                />
              </template>
            </el-table-column>
            <el-table-column prop="name" label="产品名称" width="180" />
            <el-table-column prop="model" label="产品型号" width="180" />
            <el-table-column prop="price" label="产品价格" width="180" />
            <el-table-column prop="num" label="需求数量" width="180">
              <template v-slot="{ row }">
                <el-input-number v-model="row.num" :min="0" />
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" min-width="120">
              <template #default>
                <el-button link type="primary" size="small"> 报价 </el-button>
                <el-button link type="primary" size="small">查看报价</el-button>
                <el-button link type="primary" size="small">历史报价</el-button>
                <el-button link type="primary" size="small">修改报价</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>

      <!-- 销售创建订单审核信息 -->
      <el-card style="margin-top: 30px">
        <template #header>
          <div class="card-header">
            <span>销售创建订单审核信息</span>
          </div>
        </template>
        <div style="margin-left: 10px">
          <span>审核结果: </span>
          <el-radio-group
            v-model="radio"
            style="width: 240px; margin-left: 10px"
          >
            <el-radio :label="1">审核通过</el-radio>
            <el-radio :label="2">审核未通过</el-radio>
          </el-radio-group>
          <br />
          <span>原因: </span>
          <el-text> 未通过时显示原因内容</el-text>
        </div>
      </el-card>
    </div>
    <!-- 咨询单-->
    <div v-else>
      <el-card style="margin-top: 20px">
        <template #header>
          <div class="card-header">
            <span>咨询信息</span>
          </div>
        </template>
        <div>
          <el-form
            :model="consultationInfo"
            :inline="true"
            class="demo-form-inline"
          >
            <el-form-item label="联系方式:">
              <el-input
                v-model="consultationInfo.contactInfo"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
            <el-form-item label="城市:">
              <el-input
                v-model="consultationInfo.city"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
            <br />
            <el-form-item label="公司名称:">
              <el-input
                v-model="consultationInfo.companyName"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
            <el-form-item label="职位:">
              <el-input
                v-model="consultationInfo.position"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
            <br />
            <el-form-item label="电子邮箱:">
              <el-input
                v-model="consultationInfo.email"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
            <br />
            <el-form-item label="产品描述:">
              <el-input
                v-model="consultationInfo.productDesc"
                style="width: 240px"
                :autosize="{ minRows: 2, maxRows: 4 }"
                type="textarea"
                placeholder="请输入(富文本)"
              />
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
